12 Éú³ÉµÄÄÚÈÝ£¬×Ô¶¯±àºÅÒÔ¼°Áбí

    Ä³Ð©Çé¿öÏ£¬×÷Õß¿ÉÄÜÏ£ÍûÓû§¶ËäÖȾÄÇЩ²»ÔÚÎĵµÊ÷ÖеÄÄÚÈÝ¡£ºÜÊìϤµÄÒ»¸öÀý×ÓÊǼÇÊýµÄÁÐ±í£»×÷Õß²»ÏëÏÔʽµØ¸ø³ö¼ÇÊý£¬ËûÏ£ÍûÓû§¶Ë×Ô¶¯µØÉú³ÉËüÃÇ¡£ÀàËƵأ¬×÷Õß¿ÉÄÜÏ£ÍûÓû§¶ËÔÚÒ»¸öͼÐεıêÌâÇ°Ãæ²åÈëµ¥´Ê¡°Í¼ÐΡ±£¬»òÔÚµÚÆßÕ±êÌâÇ°²åÈë¡°µÚÆßÕ¡±¡£ÌرðÊǶÔÓÚÒôƵºÍäÎÄ£¬Óû§¶ËÓ¦¸ÃÄܹ»²åÈëÕâÑùµÄ×Ö·û´®¡£

    CSS2ÖУ¬²úÉúÄÚÈݵĻúÖÆÓÐÕâÑù¼¸¸ö£º

• 'content'ÊôÐÔ£¬ºÍ:before¼°:afterαԪËØÁªÓá£
• 'cue-before'£¬'cue-after'ÓïÒôÊôÐÔ£¨²Î¼ûÓïÒôÑùʽ±í£©¡£Èç¹û'content'ÊôÐÔºÍÓïÒôÊôÐÔÁªÓã¬ËüÃÇäÖȾµÄ˳ÐòΪ£º:before£¬'cue-before'£¬£¨'pause-before'£©£¬ÔªËصÄÄÚÈÝ£¬('pause-after'£©£¬'cue-after'£¬ºÍ:after¡£
• 'display'ÊôÐÔֵΪ'list-item'µÄÔªËØ¡£

    ÏÂÃæÎÒÃÇÌÖÂÛºÍ'content'ÊôÐÔÏà¹ØµÄ»úÖÆ¡£

12.1 :before¼°:afterαԪËØ

    ×÷ÕßÓÃ:beforeºÍ:afterαԪËØÖ¸¶¨Éú³ÉµÄÄÚÈݵÄÑùʽºÍλÖá£ÈçÆäÃûËùʾ£¬:beforeºÍ:afterαԪËØÖ¸¶¨ÁËÒ»¸öÔªËØÎĵµÊ÷ÄÚÈÝ֮ǰºÍÖ®ºóµÄÄÚÈÝ¡£'content'ÊôÐÔ£¬ÓëÕâЩαԪËØÁªÓã¬Ö¸¶¨Á˲åÈëµÄÄÚÈÝ¡£

P.note:before { content: "Note: " }

    Ò»¸öÔªËØÉú³ÉµÄ¸ñʽ»¯¶ÔÏó£¨È磬¿ØÖÆ¿ò£©°üº¬Éú³ÉµÄÄÚÈÝ¡£Òò´Ë£¬¼Ù¶¨¸Ä±äÉÏÃæµÄÑùʽ±íΪ£º

P.note:before { content: "Note: " }
P.note        { border: solid green }

    ½«°ÑÕû¸ö¶ÎÂääÖȾΪÓÐÒ»¸öʵÏßÂÌÉ«±ß¿ò°üΧ£¬°üÀ¨³õʼµÄ×Ö·û´®¡£

    :beforeºÍ:afterαԪËؼ̳ÐËüÃÇÔÚÎĵµÊ÷ÏàÁªµÄÔªËصÄËùÓпɼ̳еÄÊôÐÔ¡£

Q:before {
  content: open-quote;
  color: red
}

    ÔÚ:before»ò:afterαԪËØÉùÃ÷ÖУ¬·Ç¼Ì³ÐµÄÊôÐÔÈ¡ËüÃǵijõʼֵ¡£

BODY:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}

    Óû§±ØÐëºöÂÔÓë:before¼°:afterαԪËØÏàÁªµÄÈçÏÂÊôÐÔ£º'position'£¬'float'£¬listÊôÐÔ£¬ÒÔ¼°±í¸ñÊôÐÔ¡£

    :beforeºÍ:afterαԪËØÔÊÐíÈçϵÄ'display'ÊôÐÔÖµ£º

• Èç¹ûÑ¡Ôñ×ÓµÄÖ÷ÌâÊÇÒ»¸ö¿éÀàÔªËØ£¬ÔÊÐíµÄֵΪ'none'£¬'inline'£¬'block'ºÍ'marker'¡£Èç¹û'display'ֵΪÆäËüÖµ£¬Î±ÔªËصıíÏÖºÍȡֵΪ'block'ʱÏàͬ¡£
• Èç¹ûÑ¡Ôñ×ÓµÄÖ÷ÌâÊÇÒ»¸öÐÐÄÚÔªËØ£¬ÔÊÐíµÄֵΪ'none'ºÍ'inline'¡£Èç¹û'display'ֵΪÆäËüÖµ£¬Î±ÔªËصıíÏÖºÍȡֵΪ'inline'ʱÏàͬ¡£

12.2 'content'ÊôÐÔ

    ¸ÃÊôÐÔºÍ:before¼°:afterαԪËØÁªÓÃÀ´ÔÚÎĵµÖвúÉúÄÚÈÝ¡£È¡ÖµµÄº¬ÒåÈçÏ£º

<string>

Îı¾ÄÚÈÝ£¨²Î¼û×Ö·û´®Ò»½Ú£©¡£

<uri>

¸ÃֵΪһ¸öURI£¬Ö¸¶¨ÁËÒ»¸öÍⲿµÄ×ÊÔ´¡£Èç¹ûÓû§¶ËÓÉÓÚËüËùÖ§³ÖµÄý½éÀàÐ͵ÄÏÞÖƶø²»Ö§³Ö¸Ã×ÊÔ´£¬Ëü±ØÐëºöÂÔ¸Ã×ÊÔ´¡£×¢Òâ¡£ CSS2²¢²»ÌṩһÖÖ»úÖÆÀ´¸Ä±äǶÈë¶ÔÏóµÄ³ß´ç£¬»òÌṩһ¸öÎı¾ÃèÊö£¬ÈçͬHTMLÖÐͼÐεÄ"alt"»ò"longdesc"ÊôÐÔ×öµ½µÄÄÇÑù¡£ÒԺ󼶱ðµÄCSS¿ÉÄÜ»á¸Ä±äÕâÒ»ÏÖÏó¡£

<counter>

¼ÇÊýÆ÷¿ÉÒÔÓÃÁ½¸ö²»Í¬µÄº¯ÊýÖ¸¶¨£º'counter()'»ò'counters()'¡£Ç°ÕßÓÐÁ½ÖÖÐÎʽ£º'counter(name)'»ò'counter(name, style)'¡£Éú³ÉµÄÎı¾ÊÇÔÚ¸ñʽ»¯½á¹¹ÖиõãÃüÃû¼ÇÊýÆ÷µÄÖµ£»ÒÔÖ¸Ã÷µÄÑùʽ£¨È±Ê¡Îª'decimal'£©¸ñʽ»¯¡£ºóÒ»º¯ÊýÒ²ÓÐÁ½ÖÖÐÎʽ£º'counter(name, string)'»ò'counter(name, string, style)'¡£Éú³ÉµÄÎı¾ÊǸñʽ»¯½á¹¹ÖиõãËùÓиÃÃüÃûµÄ¼ÇÊýÆ÷µÄÖµ£¬²¢ÒÔÖ¸¶¨µÄ×Ö·û´®·Ö¸î¡£¼ÇÊýÆ÷ÒÔÖ¸¶¨µÄÑùʽ£¨È±Ê¡Îª'decimal'£©äÖȾ¡£¸ü¶àµÄÐÅÏ¢²Î¼û×Ô¶¯¼ÇÊýºÍ±àºÅÒ»½Ú¡£

open-quoteºÍclose-quote

¸ÃÖµÓÉ'quotes'ÊôÐÔÖкÏÊʵÄ×Ö·û´®´úÌæ¡£

no-open-quoteºÍno-close-quote

²»²åÈëÈκÎÄÚÈÝ£¨¿Õ×Ö·û´®£©£¬µ«ÊÇÔö¼ÓÒýºÅµÄǶÌײã´Î¡£

attr(X)

¸Ãº¯ÊýÒÔ×Ö·û´®ÐÎʽ·µ»ØÑ¡Ôñ×ÓÖ÷ÌâµÄXÊôÐÔÖµ¡£CSS´¦ÀíÆ÷²»½âÎö¸Ã×Ö·û´®¡£Èç¹ûÑ¡Ôñ×ÓÖ÷ÌâûÓÐXÊôÐÔ£¬·µ»ØÒ»¸ö¿Õ×Ö·û´®¡£ÊôÐÔÃûµÄ´óСдÃô¸ÐÐÔÈ¡¾öÓÚÎĵµÓïÑÔ¡£×¢Òâ¡£CSS2ÖУ¬²»¿ÉÄÜÒýÓÃÑ¡Ôñ×ÓÆäËüÔªËصÄÊôÐÔÖµ¡£

    'display'ÊôÐÔ¿ØÖÆÄÚÈÝÊÇ·ÅÖÃÔÚÒ»¸ö¿é£¬ÐÐÄÚ»¹ÊÇÔÚ±ê¼Ç¿òÖС£

    Èç¹ûÄÚÈݺÍý½éÏà¹Ø£¬×÷ÕßÓ¦¸Ã½«'content'ÉùÃ÷·ÅÖÃÔÚ@media¹æÔòÖС£ÀýÈ磬Îı¾¿ÉÒÔÓÃÓÚÈκÎý½é×飬¶øͼÐνöÊÊÓÃÓÚͼÐκ͵ãÕóͼÐÎý½é×飬¶øÉùÒôÎļþÖ»ÊÊÓÃÓÚÒôƵý½é×é¡£

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }

IMG:before { content: attr(alt) }

    Óû§¿ÉÒÔÔÚÉú³ÉµÄÄÚÈÝÖмÓÈëÐÂÐУ¬Õâ¿ÉÒÔͨ¹ýÔÚ'content'ÊôÐÔÖ®ºóµÄÒ»¸ö×Ö·û´®ÖÐдÈë"\A"תÒåÐòÁжø´ïµ½¡£Ëü²åÈëÁËÒ»¸öÇ¿ÖÆ»»ÐУ¬ÀàËÆÓÚHTMLÖеÄBRÔªËØ¡£²Î¼û¡°×Ö·û´®¡±ºÍ¡°×Ö·ûºÍ´óСд¡±ÒÔÁ˽â¹ØÓÚ"\A"תÒåÐòÁеĸü¶àÐÅÏ¢¡£

H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}

    Éú³ÉµÄÄÚÈݲ»¸Ä±äÎĵµÊ÷¡£ÌرðµØ£¬ËüÃDz¢²»·´À¡¸øÎĵµÓïÑÔ´¦ÀíÆ÷£¨È磬½øÐÐÔÙ½âÎö¹¤×÷£©¡£

12.3 :before¼°:afterÓë'compact'¼°'run-in'ÔªËصĽ»»¥×÷ÓÃ

    ¿ÉÄÜ·¢ÉúÈçϵÄÇé¿ö£º

1. Ò»¸ö'run-in'»ò'compact'ÔªËؾßÓÐÒ»¸ö:beforeαԪËØ£¬ÆäÀàÐÍΪ'inline'£º¼ÆËãÔªËØ¿ò³ß´çµÄʱºò£¬Î±ÔªËر»¿¼ÂÇÔÚÄÚ£¨¶ÔÓÚ'compact'£©£¬²¢ÔÚÔªËصÄͬһ¿é¿òÄÚäÖȾ¡£
2. Ò»¸ö'run-in'»ò'compact'ÔªËؾßÓÐÒ»¸ö:afterαԪËØ£¬ÆäÀàÐÍΪ'inline'£ºÊÊÓÃÇ°Êö¹æÔò¡£
3. Ò»¸ö'run-in'»ò'compact'ÔªËؾßÓÐÒ»¸ö:beforeαԪËØ£¬ÆäÀàÐÍΪ'block'£ºÎ±ÔªËØ×÷ΪԪËØÖ®ÉϵÄÒ»¸ö¿é¶ø¸ñʽ»¯£¬²¢ÇÒ²»²ÎÓëÔªËسߴçµÄ¼ÆË㣨¶ÔÓÚ'compact'£©¡£
4. Ò»¸ö'run-in'»ò'compact'ÔªËؾßÓÐÒ»¸ö:afterαԪËØ£¬ÆäÀàÐÍΪ'block'£ºÔªËغÍËüµÄ:afterαԪËض¼¸ñʽ»¯Îª¿é¿ò¡£ÔÚËü×Ô¼ºµÄ:afterαԪËØÖУ¬¸ÃÔªËز¢²»¸ñʽ»¯ÎªÒ»¸öÐÐÄÚ¿ò¡£
5. 'run-in'»ò'compact'ÔªËØÖ®ºóµÄÔªËؾßÓÐÒ»¸ö:beforeαԪËØ£¬ÆäÀàÐÍΪ'block'£ºÈçºÎ¸ñʽ»¯'run-in'/'compact'ÔªËØÈ¡¾öÓÚ:beforeαԪËØÉú³ÉµÄ¿é¿ò¡£
6. 'run-in'»ò'compact'ÔªËØÖ®ºóµÄÔªËؾßÓÐÒ»¸ö:beforeαԪËØ£¬ÆäÀàÐÍΪ'inline'£ºÈçºÎ¸ñʽ»¯'run-in'/'compact'ÔªËØÈ¡¾öÓÚ:beforeÔªËØÏàÁªµÄÔªËصÄ'display'Öµ¡£

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

<H3>Centaurs</H3>
<P>have hoofs
<P>have a tail

Centaurs: ... have hoofs
... have a tail

12.4 ÒýºÅ

    CSS2ÖУ¬×÷Õß¿ÉÒÔÓÃÒ»ÖÖÓëÑùʽÏà¹ØÇÒÓëÄÚÈÝÏà¹ØµÄ·½Ê½Ö¸¶¨Óû§¶ËÓ¦¸ÃÈçºÎäÖȾÒýºÅ¡£'quotes'ÊôÐÔÖ¸¶¨ÁËÿһ²ãǶÌ×ÒýÓõÄÒýºÅ¶Ô¡£'content'ÊôÐÔ¸ø³öÁËÕâЩÒýºÅµÄÒýÓ㬲¢Ê¹ÆäÔÚÒ»¸öÒýÓÃ֮ǰºÍÖ®ºó±»²åÈë¡£

12.4.1 ÓÃ'quotes'ÊôÐÔÖ¸¶¨ÒýÓÃ

    ¸ÃÊôÐÔÖ¸¶¨ÁËÈÎÒâÊýÁ¿µÄǶÈëÒýÓõÄÒýºÅ¡£È¡ÖµµÄº¬ÒåÈçÏ£º

none

'content'ÊôÐÔµÄ'open-quote'ºÍ'close-quote'Öµ²»²úÉúÒýºÅ¡£

[<string>  <string>]+

'content'ÊôÐÔµÄ'open-quote'ºÍ'close-quote'Öµ´Ó¸ÃÒýºÅ¶ÔÁбíÖеõ½£¨¿ªÒýºÅºÍ±ÕÒýºÅ£©¡£µÚÒ»£¨×î×ó±ßµÄ£©¶Ô´ú±í×îÍâ²ãµÄÒýÓ㬵ڶþ¶Ô´ú±íµÚÒ»²ãµÄǶÌ×£¬ÒÔ´ËÀàÍÆ¡£Óû§¶Ë±ØÐë¸ù¾ÝǶÌ׵IJã´ÎʹÓÃÏàÓ¦µÄÒýºÅ¶Ô¡£

/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }

/* Insert quotes before and after Q element content */
Q:before { content: open-quote }
Q:after  { content: close-quote }

<HTML lang="en">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML>

"Quote me!"

<HTML lang="no">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

«Trøndere gråter når <Vinsjan på kaia> blir deklamert.»

12.4.2 ÓÃ'content'ÊôÐÔ²åÈëÒýºÅ

    ÒýºÅÔÚÇ¡µ±µÄλÖòåÈëµ½Ò»¸öÎĵµÖУ¬²åÈëµÄÊÇ'content'ÊôÐÔµÄ'open-quote'ºÍ'close-quote'Öµ¡£»ùÓÚǶÌ×µÄÉî¶È£¬Ã¿Ò»¸ö'open-quote'»ò'close-quote'µÄ³öÏÖ¶¼ÏàÓ¦µØ±»'quotes'ÖµÖеÄÒ»¸ö×Ö·û´®´úÌæ¡£

    'Open-quote'ÒýÓÃÒýºÅ¶ÔµÄµÚÒ»²¿·Ö£¬¶ø'close-quote'ÒýÓõڶþ²¿·Ö¡£Ê¹ÓÃÄÄÒ»¶ÔÒýºÅÈ¡¾öÓÚÒýÓõÄǶÌײã´Î£ºµ±Ç°'open-quote'֮ǰ³öÏÖÔÚËùÓÐÉú³ÉµÄÎı¾ÖеÄ'open-quote'´ÎÊý£¬¼õÈ¥'close-quote'³öÏֵĴÎÊý¡£Èç¹ûÉî¶ÈΪ0£¬Ê¹ÓõÚÒ»¶ÔÒýºÅ£»Èç¹ûÉî¶ÈΪ1£¬Ê¹Óõڶþ¶Ô£¬ÒÔ´ËÀàÍÆ¡£Èç¹ûÉî¶È´óÓÚÒýºÅ¶ÔµÄÊýÁ¿£¬×îºóÒ»¶Ô½«Öظ´Ê¹Óá£

    ×¢Ò⣬¸ÃǶÌ×Éî¶ÈÓëÔ´ÎĵµµÄǶÌ×»ò¸ñʽ»¯½á¹¹Î޹ء£

    ÓÐЩӡˢÑùʽҪÇóÔÚÒ»¸ö¿çÔ½Êý¸ö¶ÎÂäµÄÒýÓõÄÿһ¶Î֮ǰÖظ´¿ªÒýºÅ£¬¶øÖ»ÔÚ×îºóÒ»¶ÎÒÔ±ÕÒýºÅ½áÊø¡£ÔÚCSSÖУ¬¿ÉÒÔͨ¹ý¡°Ð顱µÄ±ÕÒýºÅÀ´´ïµ½ÕâÒ»µã¡£¹Ø¼ü×Ö'no-close-quote'¼õÉÙÒýºÅ²ã´Î£¬µ«ÊDz»²åÈëÒ»¸öÒýºÅ¡£

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

    ÎªÁ˶Գƣ¬Ò²ÓÐÒ»¸ö'no-open-quote'¹Ø¼ü×Ö£¬Ëü²»²åÈëÈκÎÄÚÈÝ£¬µ«Êǽ«ÒýºÅÉî¶ÈÔö¼Ó1¡£

[LANG|=fr] > *  { quotes: "«" "»" "\2039" "\203A" }
[LANG|=en] > *  { quotes: "\201C" "\201D" "\2018" "\2019" }

[LANG|=fr] > * { quotes: "«" "»" "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }

12.5 ×Ô¶¯¼ÇÊýºÍ±àºÅ

    CSS2ÖеÄ×Ô¶¯¼ÇÊýÓÉÁ½¸öÊôÐÔ¿ØÖÆ£¬'counter-increment'ºÍ'counter-reset'¡£ÕâЩÊôÐÔ¶¨ÒåµÄ¼ÇÊýÆ÷ºÍ'content'ÊôÐÔµÄcounter()ºÍcounters()º¯ÊýÁªÓá£

    'counter-increment'ÊôÐÔ½ÓÊÜÒ»¸ö»ò¶à¸ö¼ÇÊýÆ÷µÄÃû³Æ£¨±êʶ·û£©£¬Ã¿Ò»¸öÖ®ºó¿ÉÑ¡µØ¸úÒ»¸öÕûÊý¡£ÕâÒ»ÕûÊýÖ¸Ã÷¼ÇÊýÆ÷ÔÚ¸ÃÔªËØÿ´Î³öÏÖʱµÄµÝÔöÁ¿¡£È±Ê¡µÄÔöÁ¿ÊÇ1¡£ÁãºÍ¸ºÕûÊýÒ²ÊÇÔÊÐíµÄ¡£

    'counter-reset'ÊôÐÔÒ²°üº¬Ò»¸ö»ò¶à¸ö¼ÇÊýÆ÷Ãû³ÆµÄÁÐ±í£¬Ã¿Ò»¸öÖ®ºó¿ÉÑ¡µØ¸úÒ»¸öÖ¤Êé¡£¸ÃÕûÊýÖ¸Ã÷¸ÃÔªËØÿ´Î³öÏÖʱ¼ÇÊýÆ÷±»ÉèÖõÄÖµ¡£È±Ê¡Îª0¡£

    Èç¹û'counter-increment'ÒýÓÃÁËÒ»¸ö¼ÇÊýÆ÷£¬¶øËü²»ÔÚÈκÎ'counter-reset'µÄ·¶Î§ÖУ¨²Î¼ûÏÂÎÄ£©£¬¸Ã¼ÇÊýÆ÷±»ÈÏΪÓɸùÔªËØÉèÖÃΪ0¡£

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

    Èç¹ûÒ»¸öÔªËØÔö¼Ó/ÖØÖÃÁËÒ»¸ö¼ÇÊýÆ÷£¬²¢ÇÒʹÓÃËü£¨ÔÚËüµÄ:before»ò:afterαԪËصÄ'content'ÊôÐÔÖУ©£¬¸Ã¼ÇÊýÆ÷ÔÚÔö¼Ó/ÖØÖÃÖ®ºóÔÙʹÓá£

    Èç¹ûÒ»¸öÔªËØͬʱÖØÖúÍÔö¼ÓÒ»¸ö¼ÇÊýÆ÷£¬¼ÇÊýÆ÷Ïȱ»ÖØÖã¬È»ºóÔö¼Ó¡£

    'counter-reset'ÊôÐÔ×ñÑ­²ãµþ¹æÔò¡£Òò´Ë£¬»ùÓÚ²ãµþ£¬ÏÂÃæµÄÑùʽ±í£º

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

    ½«Ö»ÖØÖÃ'imagenum'¡£ÒªÖØÖÃÁ½¸ö¼ÇÊýÆ÷£¬ËüÃDZØÐëÒ»ÆðÖ¸¶¨£º

H1 { counter-reset: section -1 imagenum 99 }

12.5.1 ¼ÇÊýÆ÷ǶÌ׺Í×÷Ó÷¶Î§

    ¼ÇÊýÆ÷ÊÇ¡°×ÔÎÒǶÌס±µÄ£¬¼´Èç¹ûÔÚÒ»¸ö×ÓÔªËØÖÐÖØÓÃÒ»¸ö¼ÇÊýÆ÷£¬½«×Ô¶¯Éú³É¸Ã¼ÇÊýÆ÷µÄÒ»¸öеÄʵÀý¡£Õâ¶ÔÓÚijЩÇé¿ö£¬ÈçHTMLÖеÄÁбíºÜÖØÒª£¬ÒòΪԪËØ¿ÉÒÔÔÚËüÃÇÖ®ÄÚǶÌ×µ½ÈÎÒâÉî¶È¡£²»¿ÉÄÜΪÿһ¸ö²ã´Î¶¨ÒåÒ»¸ö¶ÀÁ¢ÃüÃûµÄ¼ÇÊýÆ÷¡£

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

    ×ÔÎÒǶÌ×»ùÓÚÕâÑùµÄ×¼Ôò£¬¼´£ºÃ¿Ò»¸öÔªËØÈç¹ûÓÐÒ»¸ö¶ÔÓÚ¼ÇÊýÆ÷XµÄ'counter-reset'£¬½«´´½¨Ò»¸öеļÇÊýÆ÷X£¬Æ䷶ΧÊǸÃÔªËØ£¬ËüµÄÇ°¼Ìͬ°û£¬ÒÔ¼°ËùÓиÃÔªËصÄÅÉÉúºÍËüµÄÇ°¼Ìͬ°û¡£

    ÔÚÉÏÀýÖУ¬Ò»¸öOL½«²úÉúÒ»¸ö¼ÇÊýÆ÷£¬¶øËùÓÐËüµÄ×ÓÔªËؽ«ÒýÓøüÇÊýÆ÷¡£

<OL>               <!-- (ÉèÖÃitem[0]Ϊ0      -->
  <LI>item         <!--  Ôö¼Óitem[0] (= 1)   -->
  <LI>item         <!--  Ôö¼Óitem[0] (= 2)   -->
    <OL>           <!--  (ÉèÖÃitem[1]Ϊ0     -->
      <LI>item     <!--   Ôö¼Óitem[1] (= 1)  -->
      <LI>item     <!--   Ôö¼Óitem[1] (= 2)  -->
      <LI>item     <!--   Ôö¼Óitem[1] (= 3)  -->
        <OL>       <!--   (ÉèÖÃitem[2]Ϊ0    -->
          <LI>item <!--    Ôö¼Óitem[2] (= 1) -->
        </OL>      <!--   )                  -->
        <OL>       <!--   (ÉèÖÃitem[3]Ϊ0    -->
          <LI>     <!--    Ôö¼Óitem[3] (= 1) -->
        </OL>      <!--   )                  -->
      <LI>item     <!--   Ôö¼Óitem[1] (= 4)  -->
    </OL>          <!--  )                   -->
  <LI>item         <!--  Ôö¼Óitem[0] (= 3)   -->
  <LI>item         <!--  Ôö¼Óitem[0] (= 4)   -->
</OL>              <!-- )                    -->
<OL>               <!-- (ÖØÖÃitem[4]Ϊ0      -->
  <LI>item         <!--  Ôö¼Óitem[4] (= 1)   -->
  <LI>item         <!--  Ôö¼Óitem[4] (= 2)   -->
</OL>              <!-- )                    -->

    'counters()'º¯ÊýÉú³ÉÒ»¸ö×Ö·û´®£¬°üº¬ËùÓоßÓÐÄǸöÃû³ÆµÄ¼ÇÊýÆ÷µÄÖµ£¬²¢ÒÔÖ¸¶¨µÄ×Ö·û´®·Ö¸î¡£

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

12.5.2 ¼ÇÊýÆ÷ÀàÐÍ

    È±Ê¡Çé¿öÏ£¬¼ÇÊýÆ÷ÊÇÒÔÊ®½øÖÆÊý¸ñʽ»¯µÄ£¬µ«ÊÇËùÓÐÊÊÓÃÓÚ'list-style-type'ÊôÐÔµÄÑùʽҲͬÑùÊÊÓÃÓÚ¼ÇÊýÆ÷¡£×¢½âÈçÏ£º

counter(name)

    ÊÇȱʡÑùʽ£¬»ò£º

counter(name, 'list-style-type')

    ËùÓеÄÑùʽ¶¼ÊÇÔÊÐíµÄ£¬°üÀ¨'disc'£¬'circle'£¬'square'ÒÔ¼°'none'¡£

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

12.5.3 ´øÓÐ'display: none'ÊôÐÔµÄÔªËØÖеļÇÊýÆ÷

    Ò»¸ö²»ÏÔʾµÄÔªËØ£¨'display'ÉèÖÃΪ'none'£©²»¿ÉÒÔÔö¼Ó»òÖØÖÃÒ»¸ö¼ÇÊýÆ÷¡£

H2.secret {counter-increment: count2; display: none}

    ÁíÒ»·½Ã棬ԪËصÄ'visibility'ÉèÖÃΪ'hidden'£¬Ëü»¹ÊÇÔö¼Ó¼ÇÊýÖµµÄ¡£

12.6 ±ê¼ÇºÍÁбí

    ´ó²¿·ÖCSSÖеĿéÀàÔªËØÉú³ÉÒ»¸öԭʼµÄ¿é¿ò¡£±¾½ÚÖУ¬ÎÒÃÇÌÖÂÛÁ½ÖÖCSS»úÖÆʹһ¸öÔªËØÉú³ÉÁ½¸ö¿ò£ºÒ»¸öԭʼ¿é¿ò£¨°üº¬ÔªËصÄÄÚÈÝ£©£¬Ò»¸ö¶ÀÁ¢µÄ±ê¼Ç¿ò£¨°üº¬ÖîÈç·ûºÅ£¬Í¼ÐΣ¬Êý×ÖµÄ×°ÊΣ©¡£±ê¼Ç¿ò¿ÉÄܶ¨Î»ÔÚԭʼ¿òµÄÄÚ²¿»òÍⲿ¡£Óë:beforeºÍ:afterÄÚÈݲ»Í¬£¬±ê¼Ç¿ò²»Ó°Ïìԭʼ¿òµÄ¶¨Î»£¬¶ø²»¹Ü¶¨Î»»úÖÆÊÇʲô¡£

    ÕâÁ½¸ö»úÖÆÖбȽÏͨÓõÄÒ»¸öÊÇCSS2ÖÐеÄÄÚÈÝ£¬³ÆΪ±ê¼Ç¡£±È½ÏרÓõĻúÖÆÇ£Éæµ½CSS1ÖеÄÁбíÊôÐÔ¡£ÁбíÊôÐÔ¶ÔÓÚ´óÁ¿³£ÓõÄÓÐÐò»òÎÞÐòµÄÁÐ±í³¡ºÏ£¬¸øÓè×÷ÕßÒ»¸ö¿ìËٵĽá¹û¡£²»¹ý±ê¼Ç¸øÓèÓû§ÔÚ±ê¼ÇÄÚÈݺÍλÖ÷½Ã澫ȷµÄ¿ØÖÆ¡£±ê¼Ç¿ÉÒԺͼÇÊýÆ÷À´ÁªÓã¬ÒÔ´´½¨ÐµÄÁбíÑùʽ£¬±ß¾à×¢½âµÄ±àºÅ£¬µÈµÈµÈµÈ¡£

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Creating a list with markers</TITLE>
     <STYLE type="text/css">
	  LI:before { 
	      display: marker;
	      content: counter(mycounter, lower-roman) ".";
	      counter-increment: mycounter;
	  }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

   i. This is the first item.
  ii. This is the second item.
 iii. This is the third item.

    ºÍÅÉÉúÑ¡Ôñ×ÓºÍ×ÓÑ¡Ôñ×ÓÁªÓ㬿ÉÒÔ¸ù¾ÝÁбíǶÌ×µÄÉî¶ÈÀ´¶¨Ò岻ͬµÄ±ê¼ÇÀàÐÍ¡£

12.6.1 ±ê¼Ç£º'marker-offset'ÊôÐÔ

    ±ê¼ÇµÄ´´½¨ÊÇͨ¹ýÉèÖÃ:before»ò:afterαԪËØÖеÄ'display'ÊôÐÔΪ'marker'¶øʵÏֵġ£¾¡¹Ü'block'ºÍ'inline'µÄ:beforeºÍ:afterÄÚÈÝÊǸÃÔªËØÉú³ÉµÄԭʼ¿òµÄÒ»²¿·Ö£¬'marker'µÄÄÚÈÝÔÚÒ»¸ö¶ÀÁ¢µÄ±ê¼Ç¿òÖиñʽ»¯£¬ÔÚԭʼ¿òÖ®Íâ¡£±ê¼Ç¿ò¸ñʽ»¯ÎªÒ»¸öµ¥ÐУ¨¼´£¬Ò»¸öÏß¿ò£©£¬Òò´ËËüÃDz»È縡¶¯ÄÇôÁé»î¡£±ê¼Ç¿òÖ»ÓÐÔÚ¸ÃαԪËصÄ'content'ÊôÐÔȷʵ²úÉúÄÚÈÝʱ£¬²Å±»´´½¨¡£

    ±ê¼Ç¿òÓб߰׺ͱ߿ò£¬µ«ÊÇûÓб߾ࡣ

    ¶ÔÓÚ:beforeαԪËØ£¬±ê¼Ç¿òÖÐÎÄ×ֵĻùÏßÔÚ´¹Ö±·½Ïò¶ÔÆëԭʼ¿òÄÚÈݵÚÒ»ÐÐÎı¾µÄ»ùÏß¡£Èç¹ûԭʼ¿òÖÐûÓÐÎı¾£¬±ê¼Ç¿òµÄ¶¥Íâ±ß¶ÔÆëԭʼ¿òµÄ¶¥Íâ±ß¡£¶ÔÓÚ:afterαԪËØ£¬±ê¼Ç¿òÖÐÎÄ×ֵĻùÏßÔÚ´¹Ö±·½Ïò¶ÔÆëԭʼ¿òÄÚÈÝ×îºóÒ»ÐÐÎı¾µÄ»ùÏß¡£Èç¹ûԭʼ¿òÖÐûÓÐÎı¾£¬±ê¼Ç¿òµÄµ×Íâ±ß¶ÔÆëԭʼ¿òµÄµ×Íâ±ß¡£

    ±ê¼Ç¿òµÄ¸ß¶ÈÓÉ'line-height'ÊôÐÔ¸ø³ö¡£:before£¨:after£©±ê¼Ç¿ò²ÎÓëԭʼ¿òµÄµÚÒ»¸ö£¨×îºóÒ»¸ö£©Ïß¿ò¸ß¶ÈµÄ¼ÆËã¡£Òò´Ë£¬¼´Ê¹±ê¼Ç¿ò´æÔÚÓÚ¶ÀÁ¢µÄÏß¿òÖУ¬±ê¼ÇºÍÔªËØÄÚÈݵĵÚÒ»ÐкÍ×îºóÒ»ÐжÔÆë¡£Èç¹ûԭʼ¿òÖв»´æÔÚµÚÒ»¸ö»ò×îºóÒ»¸öÏß¿ò£¬±ê¼Ç¿ò¶ÀÁ¢´´½¨Ïß¿ò¡£

    ±ê¼Ç¿òÔÚËüµÄÏß¿òÄڵĴ¹Ö±¶ÔÆëÓÉ'vertical-align'ÊôÐÔÖ¸¶¨¡£

    Èç¹û'width'ÊôÐÔµÄֵΪ'auto'£¬±ê¼Ç¿òµÄÄÚÈÝ¿í¶È¾ÍÊÇÄÚÈݵĿí¶È£¬·ñÔòËüÊÇ'width'µÄÖµ¡£Èç¹û'width'µÄֵСÓÚÄÚÈÝ¿í¶È£¬'overflow'ÊôÐÔÖ¸¶¨ÁËÒç³öµÄ±íÏÖ¡£±ê¼Ç¿ò¿ÉÄܸ²¸Çԭʼ¿ò¡£Èç¹û'width'Öµ´óÓÚÄÚÈÝ¿í¶È£¬'text-align'ÊôÐÔ¾ö¶¨ÄÚÈÝÔÚ±ê¼Ç¿òÖеÄˮƽ¶ÔÆë¡£

    'marker-offset'ÊôÐÔÖ¸¶¨Á˱ê¼Ç¿òºÍÆäÏàÁ¬µÄԭʼ¿òÖ®¼äµÄˮƽƫÒÆ¡£ËùºâÁ¿µÄÊÇËüÃÇ×î¿¿½üµÄ±ß¿ò±ß¼äµÄ¾àÀë¡£×¢Òâ¡£Èç¹ûÔÚ×óµ½Óҵĸñʽ»¯ÄÚÈÝÖУ¬Ò»¸ö±ê¼ÇÅÅÁÐÔÚÒ»¸ö¸¡¶¯µÄÓұߣ¬Ô­Ê¼¿ò½«ÅÅÁÐÔÚ¸¡¶¯µÄÓұߣ¬¶ø±ê¼Ç¿òÔÚ³öÏÖÔÚ¸¡¶¯µÄ×ó±ß¡£ÓÉÓÚԭʼ¿òµÄ×ó±ß¿òÅÅÔÚ¸¡¶¯µÄ×ó±ß£¨²Î¼û¸¡¶¯µÄÃèÊö£©£¬¶ø±ê¼Ç¿òÅÅÔÚԭʼ¿ò±ß¿ò±ßµÄÍâ±ß£¬Òò´Ë±ê¼ÇÒ²½«ÅÅÔÚ¸¡¶¯µÄ×ó±ß¡£ÏàËƵÄÇé¿ö³öÏÖÔÚÓÒµ½×óµÄ¸ñʽ»¯ÄÚÈÝÖУ¬±ê¼ÇÅÅÁÐÔÚ¸¡¶¯×ó±ßµÄ³¡¾°¡£

    ¶ÔÓÚÒ»¸öÉèÖÃÁË'display: list-item'µÄÔªËØËùÉú³ÉµÄÄÚÈÝ£¬Èç¹û'display'ÊôÐÔȡֵΪ'marker'£¬Îª':before'Éú³ÉµÄ±ê¼Ç¿òÈ¡´úͨ³£µÄÁбíÏî±ê¼Ç¡£

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML>
    <HEAD>
      <TITLE>Content alignment in the marker box</TITLE>
      <STYLE type="text/css">
           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
   </BODY>
 </HTML>

  (1)    This is the 
         first item.
  (2)    This is the 
         second item.
  (3)    This is the 
         third item.

    ÏÂÃæµÄÀý×ÓÔÚÁбíÏî֮ǰºÍÖ®ºóÉú³É±ê¼Ç¡£

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers before and after list items</TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before { 
   	      display: marker;
	      content: url("smiley.gif");
         LI:after {
	      display: marker;
   	      content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

  :-) first list item 
      comes first      :-(
  :-) second list item 
      comes second     :-(

    ÏÂÃæµÄÀý×ÓÓñê¼ÇÀ´±àºÅ×¢ÊÍ£¨¶ÎÂ䣩¡£

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers to create numbered notes4>/TITLE>
    <STYLE type="text/css">
      P { margin-left: 12 em; }
      @media screen, print {
         P.Note:before         { 
  	      display: marker;
	      content: url("note.gif") 
                       "Note " counter(note-counter) ":";
              counter-increment: note-counter;
              text-align: left;
              width: 10em;
         }
     }
    </STYLE>
  </HEAD>
  <BODY>
    <P>This is the first paragraph in this document.</P>
    <P CLASS="Note">This is a very short document.</P>
    <P>This is the end.</P>
  </BODY>
</HTML>

            This is the first paragraph 
            in this document.

  Note 1:   This is a very short 
            document.
           
            This is the end.

    ¸ÃÊôÐÔÖ¸¶¨Á˱ê¼Ç¿òµÄ±ß¿ò±ßºÍ×î¿¿½üËüµÄÓëÖ®ÏàÁ¬µÄԭʼ¿òµÄ±ß¿ò±ßµÄ¾àÀë¡£¸ÃÆ«ÒÆ»òÕßÊÇÓû§Ö¸¶¨µÄ£¨<length>£©»òÓÉÓû§¶ËÑ¡Ôñ£¨'auto'£©¡£³¤¶È¿ÉÒÔÊǸºÊý£¬µ«ÊÇ¿ÉÄÜÓÐʵÏÖÉϵÄÏÞÖÆ¡£

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Marker example 5</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Make space for counters */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(mycounter, lower-roman) ".";
               counter-increment: mycounter;
           }   
      </STYLE>
   </HEAD>
   <BODY>
     <P> This is a long preceding paragraph ...
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
     <P> This is a long following paragraph ...
   </BODY>
 </HTML>

        This is a long preceding
        paragraph ...
      
   i.   This is the first item.
  ii.   This is the second item.
 iii.   This is the third item.

        This is a long following
        paragraph ...

12.6.2 ÁÐ±í£º'list-style-type'£¬'list-style-image'£¬'list-style-position'¼°'list-style'ÊôÐÔ

    ÁбíÊôÐÔÔÊÐíÁбíµÄ»ù±¾¿ÉÊÓ¸ñʽ»¯¡£¶ÔÓÚ¸üÒ»°ãµÄ±ê¼Ç£¬ÔªËØÉèÖÃÁË'display: list-item'£¬½«Éú³ÉÒ»¸öԭʼ¿òÀ´°üº¬ÔªËصÄÄÚÈÝ£¬ÒÔ¼°Ò»¸ö¿ÉÑ¡µÄ±ê¼Ç¿ò¡£ÆäËüÁбíÊôÐÔÔÊÐí×÷ÕßÖ¸¶¨±ê¼ÇÀàÐÍ£¨Í¼ÐΣ¬×ÖÐλòÊý×Ö£©ÒÔ¼°ËüÃÇÏà¶Ôԭʼ¿òµÄλÖã¨ÔÚ¿òÖ®Íâ»ò¿òÖ®ÄÚ£¬ÄÚÈÝ֮ǰ£©¡£ËüÃDz»ÔÊÐí×÷ÕßΪÁбí±ê¼ÇÖ¸¶¨¸ö±ðµÄÑùʽ£¨ÑÕÉ«£¬×ÖÌ壬¶ÔÆëµÈ£©£¬Ò²²»ÔÊÐíÏà¶Ôԭʼ¿ò¶øµ÷ÕûËüµÄλÖá£

    ÁíÍ⣬Èç¹ûÒ»¸ö±ê¼ÇM£¨ÓÃ'display: marker'´´½¨£©ÓÃÔÚÒ»¸öÓÉÁбíÊôÐÔ´´½¨µÄÁбíÏMÌæ´úÁ˱ê×¼µÄÁбíÏî±ê¼Ç¡£

    ¶ÔÓÚÁбíÊôÐÔ£¬±³¾°ÊôÐÔÖ»ÊÊÓÃÓÚԭʼ¿ò£»Ò»¸ö'outside'µÄ±ê¼Ç¿òÊÇ͸Ã÷µÄ¡£±ê¼ÇÌṩÁ˱ê¼Ç¿òÑùʽ¸ü¶àµÄ¿ØÖÆ¡£

    Èç¹û'list-style-image'Ϊ'none'»òÓɸÃURIÖ¸ÏòµÄͼÐÎÎÞ·¨±»ÏÔʾʱ£¬¸ÃÊôÐÔÖ¸¶¨ÁËÁбíÏî±ê¼ÇµÄ³ÊÏÖ¡£'none'Ö¸¶¨Ã»Óбê¼Ç£¬·ñÔòÓÐÈýÖÖÀàÐ͵ıê¼Ç£º×ÖÐΣ¬Êý×ÖϵͳºÍ×Öĸϵͳ¡£×¢Ò⡣ͨ¹ýʹÁбíµÄµ¼º½¸üÈÝÒ×£¬±êºÅµÄÁбí¸Ä½øÁËÎĵµµÄ¿ÉÔĶÁÐÔ ¡£

    ×ÖÐÎÓÉdisc£¬circleºÍsquareÖ¸¶¨¡£ËüÃÇÈ·ÇеÄäÖȾȡ¾öÓÚÓû§¶Ë¡£

    Êý×ÖϵͳµÄÖ¸¶¨ÈçÏ£º

decimal

Ê®½øÖÆÊý£¬ÒÔ1¿ªÊ¼¡£

decimal-leading-zero

Ê®½øÖÆÊý£¬´øÓÐÇ°µ¼0£¨01£¬02£¬03£¬¡­¡­£¬98£¬99£©¡£

lower-roman

СдÂÞÂíÊý×Ö£¨i£¬ii£¬iii£¬iv£¬vµÈ£©¡£

upper-roman

´óдÂÞÂíÊý×Ö£¨I£¬II£¬III£¬IV£¬VµÈ£©¡£

hebrew

´«Í³µÄÏ£²®À´Êý×Ö¡£

georgian

´«Í³µÄ¸ñ³¼ªÑÇÊý×Ö¡££¨an£¬ban£¬gan£¬¡­¡­£¬he£¬tan£¬in£¬in-an£¬¡­¡­£©¡£

armenian

´«Í³µÄÑÇÃÀÄáÑÇÊý×Ö¡£

cjk-ideographic

Ò»°ã±íÒâÊý×Ö¡£

hiragana

a£¬i£¬u£¬e£¬o£¬ka£¬ki£¬¡­¡­

katakana

A£¬I£¬U£¬E£¬O£¬KA£¬KI£¬¡­¡­

hiragana-iroha

i£¬ro£¬ha£¬ni£¬ho£¬he£¬to£¬¡­¡­

katakana-iroha

I£¬RO£¬HA£¬NI£¬HO£¬HE£¬TO£¬¡­¡­

    Èç¹ûÓû§¶ËÎÞ·¨Ê¶±ðÒ»¸öÊý×Öϵͳ£¬ËüÓ¦¸ÃʹÓÃ'decimal'¡£

    ×ÖĸϵͳµÄÖ¸¶¨ÈçÏ£º

lower-latin»òlower-alpha

СдASCII×Öĸ£¨a£¬b£¬c£¬¡­¡­ z£©¡£

upper-latin»òupper-alpha

´óдASCII×Öĸ£¨A£¬B£¬C£¬¡­¡­ Z)¡£

lower-greek

Сд±ê׼ϣÀ°×Öĸalpha£¬beta£¬gamma£¬¡­¡­£¨έ£¬ή£¬ί£¬¡­¡­£©

    ±¾¹æ·¶²¢²»¶¨Òå×ÖĸϵͳÔÚ×Öĸ±íÖ®ºóÈçºÎ»ØÈÆ¡£ÀýÈ磬26¸öÁбíÏîÖ®ºó£¬'lower-latin'µÄäÖȾδ±»¶¨Òå¡£Òò´Ë£¬¶ÔÓÚ³¤µÄÁÐ±í£¬ÎÒÃÇÍƼö×÷ÕßÖ¸¶¨ÕæʵµÄÊý×Ö¡£

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Lowercase latin numbering</TITLE>
     <STYLE type="text/css">
          OL { list-style-type: lower-roman }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

  i This is the first item.
 ii This is the second item.
iii This is the third item.

    ¸ÃÊôÐÔÖ¸¶¨ÓÃÀ´ÁбíÏî±ê¼ÇµÄͼÐΡ£Èç¹ûͼÐÎÊÇ¿ÉÒԵõ½µÄ£¬Ëü½«Ìæ»»ÓÉ'list-style-type'±ê¼ÇÉèÖõıê¼Ç¡£

UL { list-style-image: url("http://png.com/ellipse.png") }

    ¸ÃÖµÖ¸¶¨±ê¼Ç¿òÏà¶Ôԭʼ¿é¿òµÄλÖá£È¡ÖµµÄº¬ÒåÈçÏ£º

outside

±ê¼Ç¿òÔÚԭʼ¿é¿òµÄÍâÃæ¡£×¢Òâ¡£CSS1ûÓÐÖ¸¶¨±ê¼Ç¿òµÄÈ·ÇÐλÖã¬ÎªÁ˼æÈÝÐԵĿ¼ÂÇ£¬CSS2±£³ÖÁËͬÑùµÄº¬ºý¡£ÒªµÃµ½±ê¼Ç¿ò¸ü¾«È·µÄ¿ØÖÆ£¬ÇëʹÓñê¼Ç¡£

inside

±ê¼Ç¿òÊÇԭʼ¿é¿òµÄµÚÒ»¸öÐÐÄÚ¿ò£¬Æäºó¸úËæµÄÊÇÔªËصÄÄÚÈÝ¡£

<HTML>
  <HEAD>
    <TITLE>Comparison of inside/outside position</TITLE>
    <STYLE type="text/css">
      UL         { list-style: outside }
      UL.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>

    <UL class="compact">
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

    ÔÚÓÒµ½×óÅÅÁеÄÎı¾ÖУ¬±ê¼Ç»á³öÏÖÔÚ¿òµÄÓұߡ£

    'list-style'ÊôÐÔÊÇÒ»¸öËõдµÄÊôÐÔ£¬ÓÃÀ´ÔÚÑùʽ±íµÄͬһ´¦Ò»´ÎÐÔÉèÖÃÈý¸öÊôÐÔ£¨'list-style-type'£¬'list-style-image'ºÍ'list-style-position'£©¡£

UL { list-style: upper-roman inside }  /* Any UL */
UL > UL { list-style: circle outside } /* Any UL child of a UL */

    ËäÈ»×÷Õß¿ÉÒÔÔÚÁбíÏîÔªËØ£¨È磬HTMLÖеÄLI£©ÉÏÖ±½ÓÖ¸¶¨Ö¸¶¨'list-style'ÐÅÏ¢£¬ËûÃÇÕâÑù×öʱҪСÐÄ¡£ÏÂÃæµÄ¹æÔò¿´ÉÏÈ¥ºÜÏàÏ󣬵«ÊǵÚÒ»¸öÉùÃ÷ÁËÒ»¸öÅÉÉúÑ¡Ôñ×Ó¶øµÚ¶þ¸öÉùÃ÷ÁËÒ»¸ö¸üÓÐÕë¶ÔÐÔµÄ×ÓÑ¡Ôñ×Ó¡£

OL.alpha LI   { list-style: lower-alpha } /* Any LI descendant of an OL */
OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */

    Èç¹û×÷ÕßֻʹÓÃÅÉÉúÑ¡Ôñ×Ó£¬¿ÉÄÜ´ï²»µ½ËûÃÇÏ£ÍûµÄЧ¹û¡£¿¼ÂÇÈçϵÄÀý×Ó£º

<HTML>
  <HEAD>
    <TITLE>WARNING: Unexpected results due to cascade</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>
</HTML>

    ÐèÒªµÄЧ¹ûÊǵÚÒ»¼¶ÁбíÏîµÄ±êǩΪ'lower-alpha'£¬µÚ¶þ¼¶µÄ±êǩΪ'disc'¡£µ«ÊDzãµþ˳Ðò½«Ê¹µÚÒ»¸öÑùʽ¹æÔò£¨°üº¬Ò»¸öÌض¨µÄÀàÐÅÏ¢£©¸²¸ÇµÄµÚ¶þ¸ö¡£ÏÂÃæµÄ¹æÔòͨ¹ý¸ÄÓÃ×ÓÑ¡Ôñ×Ó½â¾öÁËÕâÒ»ÎÊÌ⣺

OL.alpha > LI  { list-style: lower-alpha }
UL LI   { list-style: disc }

    ÁíÍâÒ»¸ö½â¾ö·½·¨ÊÇÖ»ÔÚÁбíÀàÐÍÔªËØÉÏÖ¸¶¨'list-style'ÐÅÏ¢£º

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

    ¼Ì³Ð½«OLºÍULÔªËصÄ'list-style'ֵתÒƵ½LIÔªËØ¡£ÕâÊÇÖ¸¶¨ÁбíÑùʽÐÅÏ¢µÄÍƼö·½·¨¡£

UL { list-style: url("http://png.com/ellipse.png") disc }

UL { list-style: none }